<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	  <style>
    html,
    body,
    #preloader-body{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      z-index: 9999;

    }
    .cube-folding {
      width: 50px;
      height: 50px;
      display: inline-block;
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      font-size: 0;
    }
    .cube-folding span {
      position: relative;
      width: 25px;
      height: 25px;
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      display: inline-block;
    }
    .cube-folding span::before {
      content: '';
      background-color: #007ee5;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 25px;
      height: 25px;
      -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
      -moz-animation: folding 2.5s infinite linear both;
      -webkit-animation: folding 2.5s infinite linear both;
      animation: folding 2.5s infinite linear both;
    }
    .cube-folding .leaf2 {
      -moz-transform: rotateZ(90deg) scale(1.1);
      -ms-transform: rotateZ(90deg) scale(1.1);
      -webkit-transform: rotateZ(90deg) scale(1.1);
      transform: rotateZ(90deg) scale(1.1);
    }
    .cube-folding .leaf2::before {
      -moz-animation-delay: 0.3s;
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
      background-color: #34a4ff;
    }
    .cube-folding .leaf3 {
      -moz-transform: rotateZ(270deg) scale(1.1);
      -ms-transform: rotateZ(270deg) scale(1.1);
      -webkit-transform: rotateZ(270deg) scale(1.1);
      transform: rotateZ(270deg) scale(1.1);
    }
    .cube-folding .leaf3::before {
      -moz-animation-delay: 0.9s;
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
      background-color: #83c7ff;
    }
    .cube-folding .leaf4 {
      -moz-transform: rotateZ(180deg) scale(1.1);
      -ms-transform: rotateZ(180deg) scale(1.1);
      -webkit-transform: rotateZ(180deg) scale(1.1);
      transform: rotateZ(180deg) scale(1.1);
    }
    .cube-folding .leaf4::before {
      -moz-animation-delay: 0.6s;
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      background-color: #5cb6ff;
    }

    @-moz-keyframes folding {
      0%, 10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
      25%, 75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
      90%, 100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
    @-webkit-keyframes folding {
      0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
      25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
      90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
    @keyframes folding {
      0%, 10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        -ms-transform: perspective(140px) rotateX(-180deg);
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
      25%, 75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        -ms-transform: perspective(140px) rotateX(0deg);
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
      90%, 100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        -ms-transform: perspective(140px) rotateY(180deg);
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
    #cube-wrapper {
      position: fixed;
      left: 50%;
      top: 50%;
      margin-top: -50px;
      margin-left: -50px;
      width: 100px;
      height: 100px;
      text-align: center;
    }
    #cube-wrapper:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -20px;
      margin: auto;
      width: 90px;
      height: 6px;
      background-color: rgba(0, 0, 0, 0.1);
      -webkit-filter: blur(2px);
      filter: blur(2px);
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      z-index: 1;
      -moz-animation: shadow 0.5s ease infinite alternate;
      -webkit-animation: shadow 0.5s ease infinite alternate;
      animation: shadow 0.5s ease infinite alternate;
    }
    #cube-wrapper .loading {
      font-size: 12px;
      letter-spacing: 0.1em;
      display: block;
      color: #007ee5;
      position: relative;
      top: 25px;
      z-index: 2;
      -moz-animation: text 0.5s ease infinite alternate;
      -webkit-animation: text 0.5s ease infinite alternate;
      animation: text 0.5s ease infinite alternate;
    }


  </style>
  </head>
  <body>
    <div id="app">
      <!-- 写在开头 -->
      <div id="preloader-body">
        <div id="cube-wrapper">
          <div class="cube-folding">
            <span class="leaf1"></span>
            <span class="leaf2"></span>
            <span class="leaf3"></span>
            <span class="leaf4"></span>
          </div>
          <span class="loading"data-name="Loading">正在加载中....</span>
        </div>
      </div>

      <!-- 中间写其他代码 -->



      <script>
        // 末尾绑定window.onload事件 (也可以用jquery或者vue实现，只需要在window加载完毕后，触发隐藏2个div即可)
        window.onload = function () {
          document.getElementById('cube-wrapper').style.display = "none";
          document.getElementById('preloader-body').style.display = "none";

        }
      </script>
	  </div>
  </body>
</html>
